<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>登录 - 心理咨询系统</title>
    <link href="{{ url_for('static', filename='css/bootstrap.min.css') }}" rel="stylesheet">
    <link href="{{ url_for('static', filename='css/bootstrap-icons.css') }}" rel="stylesheet">
    <link href="{{ url_for('static', filename='css/frontend.css') }}" rel="stylesheet">
</head>
<body>
    <div class="login-container">
        <div class="login-card row g-0">
            <!-- 左侧品牌展示 -->
            <div class="col-lg-5 login-left d-none d-lg-block">
                <div class="brand-logo">
                    <i class="bi bi-heart-pulse"></i>
                </div>
                <h2 class="mb-4">心理咨询师服务系统</h2>
                <p class="lead mb-4">专业的心理量表管理和智能评价服务</p>
                
                <div class="mb-4">
                    <h5 class="mb-3">会员等级</h5>
                    <div>
                        <span class="member-level level-free">
                            <i class="bi bi-person me-1"></i>基础会员 - 免费
                        </span>
                        <span class="member-level level-pro">
                            <i class="bi bi-star me-1"></i>专业会员 - ¥299/月
                        </span>
                        <span class="member-level level-org">
                            <i class="bi bi-building me-1"></i>机构会员 - ¥999/月
                        </span>
                        <span class="member-level level-research">
                            <i class="bi bi-mortarboard me-1"></i>科研会员 - ¥1999/月
                        </span>
                    </div>
                </div>
                
                <div class="features-list text-start">
                    <div class="mb-2">
                        <i class="bi bi-check-circle me-2"></i>PHQ-9、GAD-7等专业量表
                    </div>
                    <div class="mb-2">
                        <i class="bi bi-check-circle me-2"></i>智能评价和风险评估
                    </div>
                    <div class="mb-2">
                        <i class="bi bi-check-circle me-2"></i>多维度数据分析
                    </div>
                    <div class="mb-2">
                        <i class="bi bi-check-circle me-2"></i>用户信息安全保护
                    </div>
                </div>
            </div>
            
            <!-- 右侧登录表单 -->
            <div class="col-lg-7 login-right">
                <div class="text-center mb-4 d-lg-none">
                    <h3><i class="bi bi-heart-pulse me-2"></i>心理咨询系统</h3>
                </div>
                
                <h3 class="text-center mb-4">
                    <i class="bi bi-person me-2 text-primary"></i>会员登录
                </h3>
                
                <div class="alert alert-info" role="alert">
                    <div class="d-flex align-items-center">
                        <i class="bi bi-info-circle me-2"></i>
                        <div>
                            <strong>会员登录入口</strong>
                            <div class="small">心理咨询师、机构用户请在此登录。管理员请使用 
                                <a href="/admin-portal" class="alert-link">管理员登录入口</a>
                            </div>
                        </div>
                    </div>
                </div>
                
                <!-- 错误消息显示 -->
                <div id="errorMessage" class="alert alert-danger d-none" role="alert"></div>
                
                <form id="loginForm">
                    <div class="form-floating mb-3">
                        <input type="text" class="form-control" id="username" placeholder="用户名/邮箱/手机号" required>
                        <label for="username">
                            <i class="bi bi-person me-2"></i>用户名/邮箱/手机号
                        </label>
                    </div>
                    
                    <div class="form-floating mb-3">
                        <input type="password" class="form-control" id="password" placeholder="Password" required>
                        <label for="password">
                            <i class="bi bi-lock me-2"></i>密码
                        </label>
                    </div>
                    
                    <div class="row mb-3">
                        <div class="col">
                            <div class="form-check">
                                <input class="form-check-input" type="checkbox" id="rememberMe">
                                <label class="form-check-label" for="rememberMe">
                                    记住我
                                </label>
                            </div>
                        </div>
                        <div class="col text-end">
                            <a href="#" class="text-decoration-none">忘记密码？</a>
                        </div>
                    </div>
                    
                    <button type="submit" class="btn btn-login btn-primary w-100 mb-3" id="loginBtn">
                        <i class="bi bi-box-arrow-in-right me-2"></i>登录
                    </button>
                </form>
                
                <div class="text-center mb-3">
                    <span class="text-muted">或者</span>
                </div>
                
                <div class="row mb-3">
                    <div class="col-6">
                        <button class="btn btn-outline-primary w-100" disabled>
                            <i class="bi bi-wechat me-2"></i>微信登录
                        </button>
                    </div>
                    <div class="col-6">
                        <button class="btn btn-outline-success w-100" disabled>
                            <i class="bi bi-phone me-2"></i>手机登录
                        </button>
                    </div>
                </div>
                
                <hr class="my-4">
                
                <div class="text-center">
                    <p class="mb-2">还没有账号？</p>
                    <a href="{{ url_for('members.register') }}" class="btn btn-outline-secondary me-2">
                        <i class="bi bi-person-plus me-2"></i>注册账号
                    </a>
                    <a href="{{ url_for('members.plans') }}" class="btn btn-outline-info">
                        <i class="bi bi-star me-2"></i>查看会员方案
                    </a>
                </div>
                
                <div class="text-center mt-4">
                    <small class="text-muted">
                        <a href="{{ url_for('main.index') }}" class="text-decoration-none">
                            <i class="bi bi-arrow-left me-1"></i>返回首页
                        </a>
                    </small>
                </div>
            </div>
        </div>
    </div>

    <script src="{{ url_for('static', filename='js/bootstrap.bundle.min.js') }}"></script>
    <script>
        document.getElementById('loginForm').addEventListener('submit', function(e) {
            e.preventDefault();
            
            const username = document.getElementById('username').value.trim();
            const password = document.getElementById('password').value;
            const rememberMe = document.getElementById('rememberMe').checked;
            const loginBtn = document.getElementById('loginBtn');
            const errorMessage = document.getElementById('errorMessage');
            
            // 隐藏错误消息
            errorMessage.classList.add('d-none');
            
            // 验证表单
            if (!username || !password) {
                showError('请填写完整的登录信息');
                return;
            }
            
            // 显示登录中状态
            const originalText = loginBtn.innerHTML;
            loginBtn.innerHTML = '<i class="bi bi-arrow-clockwise spin me-2"></i>登录中...';
            loginBtn.disabled = true;
            
            // 提交登录请求
            fetch('/api/auth/login', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json'
                },
                body: JSON.stringify({
                    username: username,
                    password: password
                })
            })
            .then(response => response.json())
            .then(data => {
                if (data.success) {
                    // 保存登录信息
                    localStorage.setItem('userToken', data.data.access_token);
                    localStorage.setItem('userInfo', JSON.stringify(data.data.user));
                    
                    if (rememberMe) {
                        localStorage.setItem('rememberLogin', 'true');
                        localStorage.setItem('savedUsername', username);
                    } else {
                        localStorage.removeItem('rememberLogin');
                        localStorage.removeItem('savedUsername');
                    }
                    
                    // 跳转到会员工作台
                    window.location.href = '{{ url_for("members.dashboard") }}';
                } else {
                    showError(data.message || '登录失败，请重试');
                    loginBtn.innerHTML = originalText;
                    loginBtn.disabled = false;
                    // 清空密码字段
                    document.getElementById('password').value = '';
                }
            })
            .catch(error => {
                console.error('登录失败:', error);
                showError('网络连接失败，请稍后重试');
                loginBtn.innerHTML = originalText;
                loginBtn.disabled = false;
            });
        });
        
        function showError(message) {
            const errorMessage = document.getElementById('errorMessage');
            errorMessage.textContent = message;
            errorMessage.classList.remove('d-none');
        }
        
        // 页面加载时检查是否有保存的登录信息
        window.addEventListener('load', function() {
            const rememberLogin = localStorage.getItem('rememberLogin');
            const savedUsername = localStorage.getItem('savedUsername');
            
            if (rememberLogin === 'true' && savedUsername) {
                document.getElementById('username').value = savedUsername;
                document.getElementById('rememberMe').checked = true;
            }
            
            // 如果已经登录，直接跳转
            const userToken = localStorage.getItem('userToken');
            if (userToken) {
                window.location.href = '{{ url_for("members.dashboard") }}';
            }
        });

        // 添加样式
        const style = document.createElement('style');
        style.textContent = `
            .login-container {
                min-height: 100vh;
                background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
                display: flex;
                align-items: center;
                justify-content: center;
                padding: 20px;
            }
            .login-card {
                background: white;
                border-radius: 15px;
                overflow: hidden;
                max-width: 1000px;
                width: 100%;
                box-shadow: 0 20px 40px rgba(0,0,0,0.1);
            }
            .login-left {
                background: linear-gradient(45deg, #667eea, #764ba2);
                color: white;
                padding: 60px 40px;
                display: flex;
                flex-direction: column;
                justify-content: center;
                text-align: center;
            }
            .login-right {
                padding: 60px 40px;
            }
            .brand-logo {
                font-size: 4rem;
                margin-bottom: 20px;
            }
            .member-level {
                display: block;
                padding: 8px 12px;
                margin-bottom: 8px;
                background: rgba(255,255,255,0.1);
                border-radius: 20px;
                font-size: 0.9rem;
            }
            .features-list {
                margin-top: 30px;
            }
            .spin {
                animation: spin 1s linear infinite;
            }
            @keyframes spin {
                0% { transform: rotate(0deg); }
                100% { transform: rotate(360deg); }
            }
            @media (max-width: 991px) {
                .login-left {
                    display: none !important;
                }
                .login-right {
                    padding: 40px 30px;
                }
            }
        `;
        document.head.appendChild(style);
    </script>
</body>
</html> 